<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="css/login.css">  <!-- 引入相同的CSS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <!-- 引入jQuery -->
</head>
<body>
<header>
    <div class="logo">
        <img src="img/logo.png" alt="购物网站标志">
    </div>
    <div class="user-info">
        <a href="home.html">回到首页</a>
    </div>
</header>

<div class="login-container">  <!-- 使用与登录页面相同的类 -->
    <h2>注册</h2>
    <p id="error-message" class="error-message"></p>
    <form id="registerForm" class="login-form">  <!-- 使用相同的类名 -->
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br>

        <label for="password">设置密码:</label>
        <input type="password" id="password" name="password" required><br>

        <label for="confirm-password">确认密码:</label>
        <input type="password" id="confirm-password" name="confirm-password" required><br>

        <div class="captcha-container">
            <img id="captcha-img" src="" alt="验证码">
            <a href="#" id="captcha-refresh" onclick="refreshCaptcha()">换一张</a>
        </div>
        <label for="captcha">验证码:</label>
        <input type="text" id="captcha" name="captcha" required><br>

        <input type="submit" value="注册" class="submit-button">  <!-- 使用相同的类名 -->
    </form>
    <div class="back-to-login">
        已有账号？<a href='./login.html' class="register-link">返回登录</a>
    </div>
</div>

<footer>
    <p>&copy; 我的购物网站 。</p>
</footer>

<script>
    $(document).ready(function() {
        $('#captcha-img').attr('src', '/captcha');  // 页面加载时显示初始验证码图片

        $('#registerForm').on('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            var errorMessage = $('#error-message');
            errorMessage.text(""); // 清空错误信息

            // 获取输入值
            var username = $('#username').val().trim();
            var password = $('#password').val();
            var confirmPassword = $('#confirm-password').val();
            var captcha = $('#captcha').val();

            // 输入验证
            if (!validateInput(username, password, confirmPassword, errorMessage)) {
                return; // 若验证失败，则终止后续操作
            }

            // 发送Ajax请求
            sendRegistrationRequest(username, password, captcha, errorMessage);
        });
    });

    function validateInput(username, password, confirmPassword, errorMessage) {
        if (!/^[a-zA-Z0-9]{3,}$/.test(username)) {
            errorMessage.text("用户名至少3位，只能包含数字和字母！");
            $('#username').focus();
            return false;
        }
        if (password.length < 6) {
            errorMessage.text("密码至少6位！");
            $('#password').focus();
            return false;
        }
        if (password !== confirmPassword) {
            errorMessage.text("两次密码输入不一致，请先检查！");
            $('#password').focus();
            return false;
        }
        return true; // 验证成功
    }

    function sendRegistrationRequest(username, password, captcha, errorMessage) {
        $.ajax({
            url: "/user/reg",
            method: "post",
            data: {
                username: username,
                password1: password,
                password2: password,
                captcha: captcha
            },
            success: function(result) {
                if (result.state === "200") {
                    alert("恭喜，注册成功！");
                    location.href = "/login.html";
                } else {
                    errorMessage.text(result.msg);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error("注册请求失败:", textStatus, errorThrown);
                alert("服务器错误，请稍后再试！");
            }
        });
    }
</script>

</body>
</html>
